<template>
  <div>
    <div class="menu" :style="'width:' + game.configKonva.width + 'px'">
      <div>
        <el-button size="small" type="text" @click="game.setLevel(Level.low)">简单</el-button>
        <el-button size="small" type="text" @click="game.setLevel(Level.middle)">中等</el-button>
        <el-button size="small" type="text" @click="game.setLevel(Level.hard)">大师</el-button>
        <el-button size="small" type="text" @click="game.setLevel(Level.fullScreen)">满屏</el-button>
      </div>
      <div>
        <!-- <el-button type="text" @click="show = !show">开发者</el-button> -->
        <el-checkbox size="small" v-model="auto" @click="auto = !auto">自动插旗</el-checkbox>
      </div>
    </div>
    <v-touch
      style="position: relative"
      class="table"
      :style="'width:' + game.configKonva.width + 'px'"
    >
      <div class="header">
        <LED class="led" :value="game.flags"></LED>
        <img class="face" @click="game.start()" :src="face" />
        <LED class="led" :value="game.time"></LED>
      </div>
      <v-stage class="stage" ref="stage" :config="game.configKonva">
        <v-layer>
          <v-rect :config="game.bgRect"></v-rect>
          <template v-for="cells of game.field.cells">
            <template v-for="cell of cells">
              <v-rect :config="cell.config" :key="cell.id"></v-rect>
              <v-image
                ref="image"
                v-if="cell.image"
                :key="cell.id + 'image'"
                :config="cell.image.config"
                @tap="game.field.showArea($event, cell)"
                @click.left="game.field.showArea($event, cell)"
                @click.right="game.field.addFlag($event, cell)"
              ></v-image>
            </template>
          </template>

          <v-group ref="group">
            <v-image
              v-for="cell of game.field.flags"
              :key="cell.id"
              :config="cell.flag.config"
              @click.right="game.field.removeFlag(cell)"
            ></v-image>
          </v-group>
        </v-layer>
      </v-stage>

      <div
        v-show="show"
        style="
          position: absolute;
          top: 52px;
          display: flex;
          pointer-events: none;
        "
      >
        <div
          v-for="(cells, index) of game.field.cells"
          :key="index"
          style="display: flex; flex-direction: column"
        >
          <div
            v-for="cell of cells"
            :key="cell.id + 'dic'"
            style="width: 25px; height: 25px; opacity: 0.5; text-align: center"
          >
            <span>{{ cell.isMine ? "*" : cell.value }}</span>
          </div>
        </div>
      </div>
    </v-touch>
  </div>
</template>

<script>

import LED from "./components/LED.vue";
import { Game, Level } from "./js/game.js";
var game = new Game();

export default {
  name: "mine_clearance",
  components: {
    LED,
  },
  props: {},
  model: [],
  data() {
    return {
      game: game,
      Level: Level,
      LED: {
        value: 1,
      },
      show: false,
      auto: true,
    };
  },
  filters: {},
  computed: {
    face() {
      if (game.status == 0 || game.status == -1)
        return require("./images/face.gif");
      else if (game.status == 1) return require("./images/face2.gif");
      else if (game.status == 2) return require("./images/face1.gif");
    },
  },
  methods: {
    reset() {},
  },
  mounted() {
    game.setVue(this);
    game.setLevel(Level.low);

    // 禁用右击菜单
    document.oncontextmenu = function (e) {
      return false;
    };
    // setTimeout(() => {
    //   this.$refs.group.getNode().zIndex(0);
    // }, 10);
  },
  created() {},
};
</script>

<style scoped>
.table {
  margin-top: 0.8rem;
  border-radius: 6px;
  background: #cccccc;
  padding: 10px;
  width: 250px;
  margin: 10px auto;
}

.menu {
  margin: auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid #fff;
  border-left-color: #808080;
  border-top-color: #808080;
  padding: 2px;
}

.led {
  width: 50%;
}
.led:first-child {
  text-align: left;
}
.led:last-child {
  text-align: right;
}

.face {
  border: 2px solid #808080;
  border-left-color: #fff;
  border-top-color: #fff;
  width: 21px;
  height: 21px;
}

.face:active {
  border: 1.5px solid #808080;
  border-left: 2.5px solid #808080;
  border-top: 2.5px solid #808080;
}

.stage {
  margin-top: 5px;
  border: 2px solid #fff;
  border-left-color: #808080;
  border-top-color: #808080;
}
</style>
